<template>
	<div class="admins">
		<div class="cards">
			<el-form class="mb-[-16px]" :model="formData" inline>
				<el-form-item label="物料信息">
					<el-input v-model="formData.title" @keyup.enter="resetPage"  class="w-40" size="small" clearable />
				</el-form-item>
				<!-- <el-form-item label="物料编码">
					<el-input v-model="formData.no" @keyup.enter="resetPage"  class="w-40" size="small"  clearable/>
				</el-form-item> -->
				<el-form-item label="分类">
					<el-tree-select class="w-40" @keyup.enter="resetPage"  default-expand-all :check-strictly="true" v-model="formData.cate_id"
						:data="options.jobss" :props="{ value: 'id', label: 'name'}" size="small" clearable>
					</el-tree-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage" size="small">查询</el-button>
					<el-button @click="resetParams" size="small">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div style="height: 10px;"></div>
		<el-card v-loading="pager.loading" class="!border-none" shadow="never">
			<el-button type="primary" @click="onAdd" v-if="popupTitle==10||typeing=='入库单'" size="small">
				<template #icon>
					<icon name="el-icon-Plus" />
				</template>
				新增物料
			</el-button>
			<div class="mt-4">
				<mtable :data="pager.lists" ref="tableref" :type="typeTable" :list="options.tableTile" :bill="false"
					:selection="true" :operation="false" :tableheight="popupTitle==10||typeing=='入库单'?'380':'400'" @handleAdds="handleAdds"
					@onSelectionchanges="onSelectionchanges" @rowClickFunc="rowClickFunc">
					<template #tool="{item}">
						<el-table-column v-if="item.display==1" sortable :label="item.name" show-overflow-tooltip
							:prop="item.value" :width="item.width">
							<template #default="{ row }">
								<div v-if="item.name=='库存数量'">
									<span v-if="row.category_id==15">
										{{row.quantity_num}}{{row.unit_name_15}}
									</span>
									<span v-else>
										{{row.quantity_num}}{{row.unit_name}}
									</span>
								</div>
								<template v-if="item.name=='名称'&&popupTitle==20">
									<el-button @click="onHovertitle(row)" size="small">{{row.title}}</el-button>
								</template>
								<div v-if="item.name=='从属设备'">
									<el-button @click="onHovertitles(row)" v-if="row.slave_name" size="small">
										{{row.slave_name}}
									</el-button>
								</div>
							</template>
						</el-table-column>
					</template>
				</mtable>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
	<div style="display: flex;justify-content: end;padding: 10px 0px 0 0;">
		<el-button @click="onCancel">取消</el-button>
		<el-button type="primary" @click="onsumTable">确认</el-button>
	</div>
	<tableHover v-if="Hovertitles" ref="HovertitleRefs" @success="getLists" @close="Hovertitles = false"></tableHover>
	<EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getOptions" @close="showTable=false" />
	<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
	<tableHovertitle v-if="Hovertitle" ref="HovertitleRef" @success="getLists" @close="Hovertitle = false">
	</tableHovertitle>
	
</template>

<script lang="ts" setup>
	import tableHovertitle from '@/components/table-hovertitles/index.vue'
	import {
		adminLists
	} from '@/api/materials/product'
	import mtable from '@/components/table/index.vue'
	import {
		adminListss
	} from '@/api/inventory/list'
	import {
		usePaging
	} from '@/hooks/usePaging'
	import feedback from '@/utils/feedback'
	import {
		adminListssmaterials
	} from '@/api/materials/list'
	import {
		getCommonFieldDisplay
	} from '@/api/tools/code'
	import EditPopup from '../../materials/list/edit.vue'
	import tableHover from '@/components/table-hovers/index.vue'
	import useAppStore from '@/stores/modules/inventory'
	import EdittablePopup from '@/components/settable/index.vue'
	const tableref = shallowRef < InstanceType < typeof EditPopup >> ()
	const userStore = useAppStore()
	const HovertitleRefs = shallowRef < InstanceType < typeof EditPopup >> ()
	const warehouse_id = computed(() => userStore.warehouse_id)
	const tableList = computed(() => userStore.tableList)
	const popupTitle = computed(() => userStore.popupTitle)
	const typeing = computed(() => userStore.typeing)
	const emit = defineEmits(['onCancel', 'onsumTable'])
	const Hovertitles = ref(false)
	const editRefs = shallowRef < InstanceType < typeof EdittablePopup >> ()
	const editRef = shallowRef < InstanceType < typeof EditPopup >> ()
	const showTable = ref(false)
	const showEdit = ref(false)
	// 表单数据
	const formData = reactive({
		title: '',
		no: '',
		cate_id: '',
		is_order: 1,
		warehouse_id: warehouse_id,
		filter_ids: []
	})
	watch(tableList, (newValue) => {
		formData.filter_ids = []
	})
	const dataList = ref({})
	const onCancel = () => {
		emit('onCancel')
	}
	const Hovertitle = ref(false)
	const HovertitleRef =ref()
	const onHovertitle = async (data : any) => {
		Hovertitle.value = true
		await nextTick()
		HovertitleRef.value?.open('edit')
		HovertitleRef.value?.setFormData(data)
	}
	const onAdd = async () => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('add')
	}
	const handleAdds = async () => {
		showTable.value = true
		await nextTick()
		editRefs.value?.open('add')
	}
	const onHovertitles = async (data: any) => {
		Hovertitles.value = true
		await nextTick()
		HovertitleRefs.value?.open('edit')
		HovertitleRefs.value?.setFormData(data)
	}
	const onsumTable = async () => {
		if (JSON.stringify(dataList.value) === '{}') {
			feedback.confirm('请选择商品')
		} else {
			emit('onsumTable', dataList.value)
		}
	}
	const rowClickFunc = async (row: any, ref: any) => {
		// tableref.value.toggleRowSelection(row)
		ref.toggleRowSelection(row)
	}
	const types = () => {
		if (typeing.value == '入库单') {
			return adminLists
		} else {
			if (popupTitle.value == '20') {
				return adminListss
			} else {
				return adminLists
			}

		}
	}
	const {
		pager,
		getLists,
		resetParams,
		resetPage
	} = usePaging({
		fetchFun: types(),
		params: formData
	})
	const typeTable = ref('add_inventory_10_product')
	const options = reactive({
		jobss: [] as any[],
		tableTile: [] as any[]
	})
	const onSelectionchanges = (val: any) => {
		dataList.value = val
	}
	watch(() => pager.lists, (newValue, oldValue) => {
		for (let i = 0; i < newValue.length; i++) {
			for (let j = 0; j < newValue[i].cate_name.length; j++) {
				if (newValue[i].cate_name[j].id == newValue[i].category_id) {
					newValue[i].cate_names = newValue[i].cate_name[j].name
				}
			}
		}
	}, {
		deep: true
	})
	const onSetType = () => {
		if (popupTitle.value == 10) {
			typeTable.value = 'add_inventory_10_product'
		} else if (popupTitle.value == 20) {
			if (typeing.value == "入库单") {
				typeTable.value = 'add_inventory_10_product'
			} else {
				typeTable.value = 'add_inventory_20_product'
			}
		}

	}
	const getOptions = () => {
		getCommonFieldDisplay({
			type: typeTable.value
		}).then((data: any) => {
			options.tableTile = data
		})
		adminListssmaterials({}).then((data: any) => {
			options.jobss = data
		})
	}

	const ss = (newValue: any) => {
		if (newValue[0].cate_name) {
			newValue.find((val: any) => {
				if (val.cate_name) {
					if (val.cate_name[0].id == 4) {
						formData.filter_ids.push(val.id)
					}
				}

			})
		}
	}

	onMounted(() => {
		ss(tableList.value)
		onSetType()
		getLists()
		getOptions()

	})
</script>
<style scoped lang="scss">
	.cards {
		padding: 0 20px 0 20px;

	}
</style>
